<template>
  <div class="masage">
    <span>
      <h3>排行榜</h3>
      <p>CHART</p>
    </span>
    <div class="rank">
      <div
        class="sort_rank"
        v-for="(index, id) in rank_sort_1"
        :key="id"
        @mouseenter="en(1, id)"
        @mouseleave="le"
        @click="
          go_info_list(
            index.album_img_9,
            index.rankname,
            index.update_frequency,
            index.ranktype,
            index.rankid,
            index.rank_cid
          )
        "
      >
        <img
          :src="index.banner_9"
          :style="{
            background: 'url(' + index.album_img_9 + ')',
            'background-repeat': 'no-repeat',
            'background-size': '100% 100%',
          }"
          alt=""
        />
        <span
          class="iconfont"
          :class="{ 'icon-yunhang': type == 1 && num == id }"
        ></span>
        <div class="text_info">
          <h4>{{ index.rankname }}</h4>
          <div class="song">
            <p v-for="(ind, i) in index.songinfo" :key="ind.id">
              <span>{{ i }}</span>
              <span>{{ ind.author }}</span>
              -<span>{{ ind.name }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="song_heat">
      <h4 class="song_heat_tittle">新歌榜</h4>
      <div class="song_heat_info">
        <div
          class="sort_info"
          v-for="(index, id) in rank_sort_2"
          :key="id"
          @mouseenter="en(2, id)"
          @mouseleave="le"
        >
          <img
            :src="index.banner_9"
            :style="{
              background: 'url(' + index.album_img_9 + ')',
              'background-repeat': 'no-repeat',
              'background-size': '100% 100%',
            }"
            alt=""
          />
          <span
            class="iconfont"
            :class="{ 'icon-yunhang': type == 2 && num == id }"
          ></span>
        </div>
      </div>
    </div>

    <div class="song_heat">
      <h4 class="song_heat_tittle">特色榜</h4>
      <div class="song_heat_info">
        <div
          class="sort_info"
          v-for="(index, id) in rank_sort_3"
          :key="id"
          @mouseenter="en(3, id)"
          @mouseleave="le"
        >
          <img
            :src="index.banner_9"
            :style="{
              background: 'url(' + index.album_img_9 + ')',
              'background-repeat': 'no-repeat',
              'background-size': '100% 100%',
            }"
            alt=""
          />
          <span
            class="iconfont"
            :class="{ 'icon-yunhang': type == 3 && num == id }"
          ></span>
        </div>
      </div>
    </div>

    <div class="song_heat">
      <h4 class="song_heat_tittle">全球榜</h4>
      <div class="song_heat_info">
        <div
          class="sort_info"
          v-for="(index, id) in rank_sort_4"
          :key="id"
          @mouseenter="en(4, id)"
          @mouseleave="le"
        >
          <img
            :src="index.banner_9"
            :style="{
              background: 'url(' + index.album_img_9 + ')',
              'background-repeat': 'no-repeat',
              'background-size': '100% 100%',
            }"
            alt=""
          />
          <span
            class="iconfont"
            :class="{ 'icon-yunhang': type == 4 && num == id }"
          ></span>
        </div>
      </div>
    </div>

    <div class="song_heat">
      <h4 class="song_heat_tittle">音乐榜</h4>
      <div class="song_heat_info">
        <div
          class="sort_info"
          v-for="(index, id) in rank_sort_5"
          :key="id"
          @mouseenter="en(5, id)"
          @mouseleave="le"
        >
          <img
            :src="index.banner_9"
            :style="{
              background: 'url(' + index.album_img_9 + ')',
              'background-repeat': 'no-repeat',
              'background-size': '100% 100%',
            }"
            alt=""
          />
          <span
            class="iconfont"
            :class="{ 'icon-yunhang': type == 5 && num == id }"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      type: null,
      num: null,
    };
  },
  name:'rank',
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      await this.$store.dispatch("rank_sort");
    },
    en(index1, index2) {
      this.type = index1;
      this.num = index2;
    },
    le() {
      this.type = null;
      this.num = null;
    },
    go_info_list(a, b, c, d, e, f) {
      this.$router.push({
        name: "rank_song_list",
        query: {
          img:a,
          name:b,
          time:c,
          type:d,
          id: e,
          cid:f
        },
      });
    },
  },
  computed: {
    ...mapState({
      rank_sort_1: (state) => state.rank.rank_sort_1,
      rank_sort_2: (state) => state.rank.rank_sort_2,
      rank_sort_3: (state) => state.rank.rank_sort_3,
      rank_sort_4: (state) => state.rank.rank_sort_4,
      rank_sort_5: (state) => state.rank.rank_sort_5,
    }),
  },
};
</script>

<style lang="less">
.masage {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
  span {
    margin-bottom: 10px;
    position: relative;
    h3 {
      display: inline-block;
      font-size: 25px;
    }
    p {
      position: absolute;
      bottom: -10px;
      left: -100px;
      color: #858585;
      font-size: 12px;
      -webkit-transform: scale(0.8);
    }
  }
  .rank {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;

    .sort_rank {
      display: flex;
      width: 320px;
      margin-bottom: 10px;
      margin-top: 10px;
      background-color: #fbfbfb;
      position: relative;
      img {
        width: 120px;
        height: 120px;
        border-radius: 8px;
      }
      .iconfont {
        position: absolute;
        font-size: 40px;
        left: 40px;
        top: 40px;
        color: #fff;
      }
      .text_info {
        width: 180px;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        h4 {
          padding-left: 20px;
          margin-bottom: 10px;
        }
        .song {
          p {
            font-size: 10px;
            -webkit-transform: scale(0.8);
            height: 20px;
            color: #858585;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            span {
              display: inline;
            }
            span:nth-child(1) {
              margin-right: 10px;
            }
          }
        }
      }
    }
    .sort_rank:last-child:nth-child(3n-1) {
      margin-right: 340px;
    }
  }

  .song_heat {
    .song_heat_tittle {
      font-size: 15px;
    }

    .song_heat_info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .sort_info {
        position: relative;
        width: 18%;
        margin-top: 10px;
        margin-bottom: 10px;
        .icon-yunhang {
          position: absolute;
          font-size: 40px;
          width: 40px;
          color: #fff;
          left: 70px;
          top: 72px;
        }
        img {
          // margin-left: 10px;
          width: 180px;
          height: 180px;
          border-radius: 5px;
        }
      }
      .sort_info:last-child:nth-child(5n-1) {
        margin-right: 205px;
      }
      .sort_info:last-child:nth-child(5n-2) {
        margin-right: 410px;
      }
      .sort_info:last-child:nth-child(5n-3) {
        margin-right: 615px;
      }
    }
  }
}
</style>